<html>
<head>
<link rel="stylesheet" href="css/jquery/redmond.css" type="text/css" media="all" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery_ui.js"></script>
<style type="text/css">
body{
	color:#000;
	font:12px Arial;
}
div.editable_data{
	font:16px Arial;
	color:#000000;
	padding: 0 0 0 2px;
}
select.editable_data, 
textarea.editable_data,
input.editable_data{
	font:16px Arial;
	border:1px solid #000;
	background:transparent;
	color:#000000;
	padding:0px;
	height:20px;
}
textarea.editable_data{
	height:auto;
}
</style>
<script type="text/javascript" >
$(document).ready(function() {
	
});
var editMode = function(){
	$('.editable_data').each(function(){
		var current_class=this.className;
		var type=current_class.split(' ')[1];
		var text1='<input type="text" class="'+current_class+'" value="'+this.innerHTML+'" name="'+this.id+'" />';
		var text2='<div class="'+current_class+'" id="'+this.name+'">'+this.value+'</div>';
		if(type){
			switch(type){
				case 'textarea':
					text1='<textarea class="'+current_class+'" name="'+this.id+'">'+this.innerHTML+'</textarea>';
					var newElement = this.tagName=='DIV'?text1:text2;
					this.parentNode.innerHTML=newElement;
				break;
				case 'checkbox_checked':
					text1='<label><input type="checkbox" class="'+current_class+'" value="1" name="'+this.id+'" checked="checked"/>'+this.innerHTML+'</label>';
					text2='<div class="'+current_class+'" id="'+this.name+'">'+this.parentNode.innerHTML.split('>')[1]+'</div>';
					var newElement = this.tagName=='DIV'?text1:text2;
					if(this.tagName=='DIV'){
						this.parentNode.innerHTML=newElement;
					}else{
						this.parentNode.parentNode.innerHTML=newElement;
					}
				break;
				case 'checkbox_unchecked':
					text1='<label><input type="checkbox" class="'+current_class+'" value="1" name="'+this.id+'"/>'+this.innerHTML+'</label>';
					text2='<div class="'+current_class+'" id="'+this.name+'">'+this.parentNode.innerHTML.split('>')[1]+'</div>';
					var newElement = this.tagName=='DIV'?text1:text2;
					if(this.tagName=='DIV'){
						this.parentNode.innerHTML=newElement;
					}else{
						this.parentNode.parentNode.innerHTML=newElement;
					}
				break;
				default:
					text1=$('#'.type)[0].innerHTML;
					var newElement = this.tagName=='DIV'?text1:text2;
					this.parentNode.innerHTML=newElement;
				break;
			}
		}else{
			var newElement = this.tagName=='DIV'?text1:text2;
			this.parentNode.innerHTML=newElement;
		}
	});
}
</script>
</head>
<body>
<div>
Редактируемое поле<br>
<div><div class="editable_data" id='naa1'>Редактируемый текст1</div></div>
<div><div class="editable_data textarea" id='naa2'>Редактируемый текст2</div></div>
<div><div class="editable_data checkbox_checked" id='naa3'>Редактируемый текст3</div></div>
<div><div class="editable_data checkbox_unchecked" id='naa4'>Редактируемый текст4</div></div>
</div>
<a href="javascript:void(0)" onclick="editMode()">[0]</a>
</body>
</html>